import { QRCodeSVG } from 'qrcode.react';
import React, { useState } from 'react';
import style from './index.less'
import { Modal, Button } from 'antd';
import ReactDOM from 'react-dom';
import { IArticleItem } from '@/types'

const App = ({ ProputItem }: any) => {

    const [isModalVisible, setIsModalVisible] = useState(false);

    const showModal = (e: any) => {
        e.stopPropagation();
        setIsModalVisible(true);
    };

    const handleOk = () => {
        setIsModalVisible(false);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };

    return (
        <div>
            <div className={style.box}>
                <span onClick={showModal}>
                    分享
                </span>
                <Modal title="分享海报" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}
                    cancelText='关闭' okText='下载' width='400px'
                >
                    <img src={ProputItem.cover} className={style.img} />
                    <div className={style.textBox}>
                        <p>{ProputItem.title}</p>
                        <p>{ProputItem.summary}</p>
                    </div>
                    <div className={style.erBox}>
                        <div className={style.er}>
                            <QRCodeSVG value={ProputItem.id} />
                        </div>
                        <div className={style.erText}>
                            <p>识别二维码查看文章</p>
                            <p>原文分享自 <span className={style.popups}>创作平台</span></p>
                        </div>
                    </div>
                </Modal>
            </div>
        </div>
    );
};

export default App
